﻿

/*
@media (min-width: 1600px) {
	.content_img { 
	    margin: 0 auto; 
	    max-width: 720px; 
	    height: 436px;
	} 	
}
*/

@media (max-width: 2560px) {
	.box0{
        max-width: 75%;
        margin: 10px auto 0 auto;         
    }
    .box1{
        max-width: 75%;
        margin: 10px auto 0 auto;         
    }
    .box2{
        max-width: 60%;
        margin: 10px auto 0 auto;         
    }
	.card-deck .card {
		margin: 15px 35px 15px 35px !important;
	}
	.carousel-caption h3, h4{
		font-family: Segoe UI, Verdana;
    }
	.artist{	
	    margin-top: 40px
	}
}

@media (max-width: 1680px) {
	.box0{
        max-width: 80%;
        margin: 10px auto 0 auto;         
    }
    .box1{
        max-width: 80%;
        margin: 10px auto 0 auto;         
    }
    .box2{
        max-width: 78%;
        margin: 10px auto 0 auto;          
    }
	.card-deck .card {
		margin: 15px 25px 15px 25px !important;
	}
	.carousel-caption h3, h4{
		font-family: Segoe UI, Verdana;
    }
    .artist{	
	    margin-top: 40px
	}
}


@media (max-width: 1440px) {
	.box0{
        max-width: 98%;
        margin: 10px auto 0 auto;         
    }
    .box1{
        max-width: 80%;
        margin: 10px auto 0 auto;         
    }
    .box2{
        max-width: 80%;
        margin: 10px auto 0 auto;          
    }
	.card-deck .card {
		margin: 5px 15px 5px 15px !important;
	}
	.carousel-caption h3, h4{
		font-family: Segoe UI, Verdana;
    }
    .artist{	
	    margin-top: 40px
	}
}


@media (max-width: 1080px) {
	.box0{
        max-width: 80%;
        margin: 10px auto 0 auto;         
    }
    .box1{
        max-width: 80%;
        margin: 10px auto 0 auto;         
    }
    .box2{
        max-width: 80%;
        margin: 10px auto 0 auto;          
    }
    .carousel-caption h3, h4{
		font-family: Segoe UI, Verdana;
        font-size: 22px;
    }
    .carousel-caption p{
        font-size: 12px;
    }
    .carousel-caption {
        padding-bottom: 0px;
        margin: 0px;
        right: 5%;
        left: 5%;
    }
	.card-deck .card {
		margin: 15px 5px 15px 5px !important;
	}
	.container-fluid  img {
		width: 280px !important;
	}
	h4 {
	   font-size: 22px !important;
	}
	.artist{	
	    margin-top: 40px
	}
	.container, .container-lg, .container-md, .container-sm {
		max-width: 720px;
	}
}

@media (min-width: 1440px) {
    .artist-name{	
	    position: fixed
	}
}



#app{
    /*保证footer是相对于main位置绝对定位*/
    position: fixed;
    width: 100%;
    height: 100%; 
    min-height: 100%;
    overflow-y: visible;
    font-size: 14px;
    color: white; 
    font-family: Segoe UI, Microsoft YaHei, Verdana, Tahoma, Arial, sans-serif;
	background-color: #696969;
}

.header{ 
    top: 0; 
    width: 100%; /* left: 0; right: 0; */
    position: absolute;
    z-index: 1001;
    box-shadow: 0px 5px 10px #666666
}

.footer{
    bottom: 0; 
    padding-bottom: 10px;
    position: fixed;
    text-align: center; 
    width: 100%; /* left: 0; right: 0; */
    height: 70px; 
    background-color: rgba(53,58,64,0.7); 
    z-index: 1001;
    font-weight: bold
}

.top1{
    width: 100%; 
    height: 90px; 
}

.top2{
    width: 100%; 
    height: 80px; 
}

.top3{
    width: 100%; 
    height: 60px; 
}

.index{
       background: url(~@/assets/img/background/bg_index.jpg); 
       background-repeat: no-repeat; 
       background-size: cover;
	   background-attachment: fixed;
       overflow-y: scroll;
       width: 100%;
       height: 100%;
       min-height: 100%;
       /*设置padding-bottom值大于等于footer的height值，以保证index的内容能够全部显示出来而不被footer遮盖；*/  
       padding-bottom: 100px;
       position: absolute;
       top: 0;
	   -webkit-overflow-scrolling: touch;
}

.comment{
       background: url(~@/assets/img/background/bg_index.jpg); 
       background-repeat: no-repeat; 
       background-size: cover;
	   background-attachment: fixed;
       overflow-y: scroll;
       width: 100%;
       height: 100%;
       min-height: 100%;
       padding-bottom: 100px;
       position: absolute;
       top: 0;
	   -webkit-overflow-scrolling: touch;
}

.scotland{
       background: url(~@/assets/img/background/bg_scotland.jpg); 
       background-repeat: no-repeat;
       background-size: cover;
	   background-attachment: fixed;
       overflow-y: scroll;
       width: 100%;
       height: 100%;
       min-height: 100%;
       padding-bottom: 100px;
       position: absolute;
       top: 0;
	   -webkit-overflow-scrolling: touch;
}

.britpop{
       background: url(~@/assets/img/background/bg_britpop.jpg); 
       background-repeat: no-repeat;
	   background-position: center center;
       background-size: cover;
	   background-attachment: fixed;
       overflow-y: scroll;
       width: 100%;
       height: 100%;
       min-height: 100%;
       padding-bottom: 100px;   
       position: absolute;
       top: 0;
	   -webkit-overflow-scrolling: touch;
}

.shoegaze{
       background: url(~@/assets/img/background/bg_shoegaze.jpg); 
       background-repeat: no-repeat;
       background-size: cover;
	   background-attachment: fixed;
       overflow-y: scroll;
       width: 100%;
       height: 100%;
       min-height: 100%;
       padding-bottom: 100px;
       position: absolute;
       top: 0;
	   -webkit-overflow-scrolling: touch;
}

.ireland{
       background: url(~@/assets/img/background/bg_ireland.jpg); 
       background-repeat: no-repeat;
       background-size: cover;
	   background-attachment: fixed;
       overflow-y: scroll;
       width: 100%;
       height: 100%;
       min-height: 100%;
       padding-bottom: 100px;
       position: absolute;
       top: 0;
	   -webkit-overflow-scrolling: touch;
}

.electronic{
       background: url(~@/assets/img/background/bg_electronic.jpg); 
       background-repeat: no-repeat;
       background-size: cover;
	   background-attachment: fixed;
       overflow-y: scroll;
       width: 100%;
       height: 100%;
       min-height: 100%;
       padding-bottom: 100px;
       position: absolute;
       top: 0;
	   -webkit-overflow-scrolling: touch;
}

.classic{
       background: url(~@/assets/img/background/bg_classic.jpg); 
       background-repeat: no-repeat;
	   background-position: center center;
       background-size: cover;
	   background-attachment: fixed;
       overflow-y: scroll;
       width: 100%;
       height: 100%;
       min-height: 100%;
       padding-bottom: 100px;   
       position: absolute;
       top: 0;
	   -webkit-overflow-scrolling: touch;
}

.female{
       background: url(~@/assets/img/background/bg_female.jpg); 
       background-repeat: no-repeat;
	   background-position: center center;
       background-size: cover;
	   background-attachment: fixed;
       overflow-y: scroll;
       width: 100%;
       height: 100%;
       min-height: 100%;
       padding-bottom: 100px;   
       position: absolute;
       top: 0;
	   -webkit-overflow-scrolling: touch;
}

.male{
       background: url(~@/assets/img/background/bg_male.jpg); 
       background-repeat: no-repeat;
	   background-position: center center;
       background-size: cover;
	   background-attachment: fixed;
       overflow-y: scroll;
       width: 100%;
       height: 100%;
       min-height: 100%;
       padding-bottom: 100px;   
       position: absolute;
       top: 0;
	   -webkit-overflow-scrolling: touch;
}

.indie{
       background: url(~@/assets/img/background/bg_indie.jpg); 
       background-repeat: no-repeat;
	   background-position: center center;
       background-size: cover;
	   background-attachment: fixed;
       overflow-y: scroll;
       width: 100%;
       height: 100%;
       min-height: 100%;
       padding-bottom: 100px;   
       position: absolute;
       top: 0;
	   -webkit-overflow-scrolling: touch;
}

.classic-blur{
       background: url(~@/assets/img/background/bg_classic_blur.jpg); 
	   background-repeat: no-repeat;
       background-size: cover;
	   background-attachment: fixed;
       width: 100%;
       height: 100%;
       min-height: 100%;
       padding-bottom: 100px;
       position: absolute;
       top: 0;
}

.electronic-blur{
       background: url(~@/assets/img/background/bg_electronic_blur.jpg); 
	   background-repeat: no-repeat;
       background-size: cover;
	   background-attachment: fixed;
       width: 100%;
       height: 100%;
       min-height: 100%;
       padding-bottom: 100px;
       position: absolute;
       top: 0;
}

.britpop-blur{
       background: url(~@/assets/img/background/bg_britpop_blur.jpg); 
	   background-repeat: no-repeat;
       background-size: cover;
	   background-attachment: fixed;
       width: 100%;
       height: 100%;
       min-height: 100%;
       padding-bottom: 100px;
       position: absolute;
       top: 0;
}

.ireland-blur{
       background: url(~@/assets/img/background/bg_ireland_blur.jpg); 
	   background-repeat: no-repeat;
       background-size: cover;
	   background-attachment: fixed;
       width: 100%;
       height: 100%;
       min-height: 100%;
       padding-bottom: 100px;
       position: absolute;
       top: 0;
}

.scotland-blur{
       background: url(~@/assets/img/background/bg_scotland_blur.jpg); 
	   background-repeat: no-repeat;
       background-size: cover;
	   background-attachment: fixed;
       width: 100%;
       height: 100%;
       min-height: 100%;
       padding-bottom: 100px;
       position: absolute;
       top: 0;
}

.shoegaze-blur{
       background: url(~@/assets/img/background/bg_shoegaze_blur.jpg); 
	   background-repeat: no-repeat;
       background-size: cover;
	   background-attachment: fixed;
       width: 100%;
       height: 100%;
       min-height: 100%;
       padding-bottom: 100px;
       position: absolute;
       top: 0;
}

.female-blur{
       background: url(~@/assets/img/background/bg_female_blur.jpg); 
	   background-repeat: no-repeat;
       background-size: cover;
	   background-attachment: fixed;
       width: 100%;
       height: 100%;
       min-height: 100%;
       padding-bottom: 100px;
       position: absolute;
       top: 0;
}

.male-blur{
       background: url(~@/assets/img/background/bg_male_blur.jpg); 
	   background-repeat: no-repeat;
       background-size: cover;
	   background-attachment: fixed;
       width: 100%;
       height: 100%;
       min-height: 100%;
       padding-bottom: 100px;
       position: absolute;
       top: 0;
}

.div-login {
    width: 250px; 
    height: 200px;
    margin: 100px auto;    
}

.div-register {
    width: 350px; 
    height: 200px;
    margin: 100px auto 200px;
    padding: 0 10px 0;   
}

